<template>
	<view class="my">
		<div class="my-header">
			<div class="my-user" @click="goLogin()">
				<div class="user-avator" v-if="isShow">
					<image :src="user_avatar" mode=""></image>
				</div>
				<div class="user-avator" v-else>
					<image src="../../static/头像.png" mode=""></image>
				</div>
				<div class="user-detail">
					<div class="user-name" v-if="isShow">
						<text>{{user_nickName}}</text>
					</div>
					<div class="user-name" v-else>
						<text>去登录</text>
					</div>
					<div class="user-id" v-if="isShow">
						<text>ID:{{user_id}}</text>
						<image src="../../static/vvip.png" mode=""></image>
					</div>
				</div>
				<div class="user-right">
					<image src="../../static/Gary.png" mode=""></image>
				</div>
			</div>
			<div class="my-info">
				<div class="info-left">
					<ul>
						<li v-for="(item,i) in myInfo">
							<text v-if="isShow">{{item.count}}</text>
							<text v-else>0</text>
							<p>{{item.title}}</p>
						</li>

					</ul>
				</div>
				<div class="info-right" @click="addSign()">
					<text>签到</text>
				</div>
			</div>
			<div class="my-vip">
				<div class="vip-img">
					<image src="../../static/vvvip.png" mode=""></image>
				</div>
				<div class="vip-con">
					<text>會員書庫</text>
					<p>開通VIP即可暢享閲讀VIP作品</p>
				</div>
				<div class="vip-jian">
					<image src="../../static/White.png" mode=""></image>
				</div>
			</div>
		</div>
		<div class="my-banner">
			<ul>
				<li v-for="(item,i) in myInfo" @click="goBook(i)">
					<div class="banner-img">
						<image :src="item.icon" mode=""></image>
					</div>
					<text :class="'p'+(i+1)">{{item.content}}</text>
				</li>
			</ul>
		</div>
		<div class="my-detail">
			<div class="my-list">
				<ul>
					<li @click="addSign()">
						<div class="list-left">
							<image src="../../static/签到.png" mode=""></image>
							<text>签到记录</text>
						</div>
						<div class="list-right">
							<text v-if="isShow">已签到{{signNum}}天</text>
							<image src="../../static/Gary.png" mode=""></image>
						</div>
					</li>
					<li @click="goPersonal()">
						<div class="list-left">
							<image src="../../static/个人资料.png" mode=""></image>
							<text>个人资料</text>
						</div>
						<div class="list-right">
							<image src="../../static/Gary.png" mode=""></image>
						</div>
					</li>
					<li  @click="backMy()">
						<div class="list-left">
							<image src="../../static/设置.png" mode=""></image>
							<text>退出个人中心</text>
						</div>
						<div class="list-right">
							<image src="../../static/Gary.png" mode=""></image>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myInfo: [{
					count: 0,
					title: '书架',
					icon: '../../static/bookshelf-active.png',
					content: '我的书架',

				}, {
					count: 0,
					title: '评论数',
					icon: '../../static/commit.png',
					content: '我的评论',

				}, {
					count: 0,
					title: '浏览数',
					icon: '../../static/read.png',
					content: '浏览记录',

				}],
				user_avatar: '',
				user_create_time: '',
				user_id: '',
				user_nickName: '',
				sign_create_time: '',
				signNum: 0,
				isShow: false
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中'
			})
			let userInfo = uni.getStorageSync('userInfo')
			// console.log(JSON.parse(userInfo));
			if(userInfo){
				
				this.isShow = true
				let {
					user_avatar,
					user_create_time,
					user_id,
					user_nickName
				} = JSON.parse(userInfo);
				this.user_avatar = user_avatar;
				this.user_create_time = user_create_time;
				this.user_id = user_id;
				this.user_nickName = user_nickName;
				this.sign_create_time = new Date().getTime();
				// 查询签到
				uniCloud.callFunction({
						name: 'list_sign',
						data: {}
					})
					.then(content => {
						console.log('2.0', content);
						let {
							result: {
								data
							}
						} = content
						this.signNum = data.length
					})
				//调用云函数，查询书架
				uniCloud.callFunction({
						name: 'list_bookself',
						data: {}
					})
					.then(content => {
						// console.log('1.0',content);
						let {
							result: {
								data
							}
						} = content;
						this.myInfo[0].count = data.length
					})
					//调用云函数，查询评论
					uniCloud.callFunction({
							name: 'list_write',
							data: {}
						})
						.then(content => {
							// console.log('1.0',content);
							let {
								result: {
									data
								}
							} = content;
							this.myInfo[1].count = data.length
						})
						//调用云函数，查询浏览数
						uniCloud.callFunction({
								name: 'list_read',
								data: {}
							})
							.then(content => {
								// console.log('1.0',content);
								let {
									result: {
										data
									}
								} = content;
								this.myInfo[2].count = data.length
								uni.hideLoading()
							})
			}else{
				uni.hideLoading()
			}
		},
		methods: {
			async addSign() {
			if(this.user_id){
				//调用云函数，查询签到
				await uniCloud.callFunction({
						name: 'list_sign',
						data: {}
					})
					.then(content => {
						console.log('2.0', content);
						let {
							result: {
								data
							}
						} = content;
				
						if (data.length == 0) {
							//调用云函数，添加签到
							uniCloud.callFunction({
									name: 'sign',
									data: {
										user_nickName: this.user_nickName
									}
								})
								.then(content => {
									console.log('1.0', content);
									let {
										result: {
											data
										}
									} = content;
				
									uni.showToast({
										title: '签到成功',
										icon: 'success'
									})
								})
						} else {
							let k = data.length;
							let signTime = this.formatData(data[k - 1].sign_create_time);
							let todayTime = this.formatData(this.sign_create_time);
				
							if (signTime == todayTime) {
								uni.showToast({
									title: '今天已签到过',
									icon: 'none'
								})
								return
							} else {
								//调用云函数，添加签到
								uniCloud.callFunction({
										name: 'sign',
										data: {
											user_nickName: this.user_nickName
										}
									})
									.then(content => {
										console.log('1.0', content);
										let {
											result: {
												data
											}
										} = content;
										// this.signNum = data.length
				
										uni.showToast({
											title: '签到成功',
											icon: 'success'
										})
									})
				
							}
						}
				
					})
			}else{
				uni.showToast({
					title: '您还没有登录呢！',
					icon:'none'
				})
			}

			},
			formatData(data) {
				var date = new Date(data); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				return Y + M + D;
			},
			goBook(i) {
				if(this.user_id){
					if (i == 0) {
						uni.switchTab({
							url: '../bookshelf/bookshelf'
						})
					}else if(i == 1){
						uni.navigateTo({
							url:'../discuss/discuss'
						})
					}else{
						uni.navigateTo({
							url:'../record/record'
						})
					}
				}else{
					uni.showToast({
						title: '您还没有登录呢！',
						icon:'none'
					})
				}
			},
			backMy(){
				uni.showModal({
					title: '您确定退出个人中心吗?',
					success(res) {
						if(res.confirm){
						uni.showToast({
							title:'退出成功',
							icon:'success'
						})					
						location.reload()
						uni.removeStorageSync('userInfo')
						}else if(res.cancel){
							uni.showToast({
								title:'取消退出',
								icon:'none'
							})
						}
					}
				})
			},
			goPersonal(){
				if(this.user_id){
					uni.navigateTo({
						url:'../personal/personal'
					})
				}else{
					uni.showToast({
						title: '您还没有登录呢！',
						icon:'none'
					})
				}
			},
			goLogin(){
				uni.navigateTo({
					url:'../login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.my {
		background-image: url("../../static/background-image.png");
		left: -10px;
		top: 0px;
		width: 100%;
		height: 1400rpx;
		opacity: 1;
		overflow: hidden;

		.my-header {
			position: relative;
			width: 90%;
			height: 410rpx;
			margin: 76rpx auto 0;
			background-color: #fceccc;
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;
			border-top-left-radius: 18px;
			border-top-right-radius: 18px;
			background: rgba(252, 236, 204, 1);
			box-shadow: 0px 0px 0px 0px rgba(74, 17, 25, 0.1);
			border: 1px solid #fd5e40;
			box-sizing: border-box;
			border-bottom-color: #fceccc;

			.my-user {
				width: 100%;
				display: flex;
				align-items: center;

				.user-avator {
					margin-top: 10rpx;
					width: 108rpx;
					height: 108rpx;
					margin-left: 8rpx;
					// overflow: hidden;
					box-sizing: border-box;

					image {
						width: 100%;
						height: 100%;
						border-radius: 100%;
						border: 1px solid #fd5e40;
					}
				}

				.user-detail {

					width: 440rpx;
					margin-left: 40rpx;
					margin-top: 14rpx;

					.user-name {
						text {
							font-weight: 600;
							font-size: 18px;
							color: rgba(59, 59, 59, 1);
						}
					}

					.user-id {
						display: flex;
						align-items: center;
						margin-top: 16rpx;

						text {
							width: 240rpx;
							display: block;
							font-size: 13px;
							color: rgba(119, 130, 138, 1);
							text-overflow: ellipsis;
							overflow: hidden;
							word-break: break-all;
							white-space: nowrap;
						}

						image {
							margin-left: 44rpx;
							width: 44rpx;
							height: 32rpx;
						}
					}
				}

				.user-right {
					width: 20rpx;
					height: 32rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.my-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 38rpx;
				margin-left: 12rpx;

				.info-left {
					ul {
						display: flex;
						padding: 0;
						list-style: none;

						li {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-right: 40rpx;

							text {
								font-size: 20px;
								font-weight: 600;
								color: rgba(59, 59, 59, 1);
							}

							p {
								margin-top: 4rpx;
								color: rgba(102, 102, 102, 1);
								font-size: 12px;
							}
						}
					}
				}

				.info-right {
					width: 120rpx;
					height: 60rpx;
					margin-right: 14rpx;
					text-align: center;
					line-height: 60rpx;
					border-radius: 25.5px;
					background: linear-gradient(90deg, rgba(247, 136, 23, 1) 0%, rgba(232, 111, 45, 1) 100%);
					font-size: 14px;
					color: #fff;

				}
			}

			.my-vip {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				display: flex;
				align-items: center;
				height: 90rpx;
				background-color: #c59c6e;
				border-top-left-radius: 25px;
				border-top-right-radius: 25px;

				.vip-img {
					width: 50rpx;
					height: 40rpx;
					margin-left: 38rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.vip-con {
					display: flex;
					align-items: center;

					text {
						margin-left: 15rpx;
						font-size: 15px;
						color: rgba(255, 255, 255, 1);
					}

					p {
						margin-left: 30rpx;
						font-size: 12.5px;
						color: rgba(255, 255, 255, 1);
					}
				}

				.vip-jian {
					width: 32rpx;
					height: 32rpx;

					image {
						width: 100%;
						height: 100%;
						margin-left: 26rpx;
					}
				}
			}
		}

		.my-banner {
			width: 100%;
			height: 135rpx;
			background-color: #fceccc;

			ul {
				width: 100%;
				height: 100%;
				padding: 0;
				list-style: none;
				display: flex;
				align-items: center;
				justify-content: space-evenly;


				li {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 0 70rpx;

					.banner-img {
						width: 52rpx;
						height: 50rpx;
						margin-top: 4rpx;

						image {
							width: 100%;
							height: 100%;
						}

					}

					text {
						margin-top: 14rpx;
						font-size: 13px;
						// font-weight: 600;
					}

					.p1 {
						color: #fd5f41
					}

					.p2 {
						color: #9695f5
					}

					.p3 {
						color: #1497db
					}
				}
			}
		}

		.my-detail {
			width: 100%;
			height: 520rpx;
			// background-color: #fceccc;
			// margin-top: 40rpx;
			margin-bottom: 7rpx;

			// overflow: hidden;
			.my-list {
				width: 90%;
				height: 100%;
				margin: 0 auto;
				background-color: #fceccc;
				border-bottom-left-radius: 25px;
				border-bottom-right-radius: 25px;
				border: 1px solid #fd5e40;
				border-top-color: #fceccc;

				ul {
					width: 92%;
					margin: 0 auto;
					padding: 20rpx 0;
					box-sizing: border-box;
					list-style: none;
					overflow: hidden;

					li {
						margin-top: 10rpx;
						padding: 10rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						height: 100rpx;
						border-bottom: 1px solid #fd5e40;

						.list-left {
							display: flex;
							align-items: center;

							image {
								width: 60rpx;
								height: 60rpx;
								// background-color: #fceccc;
								border-radius: 100%;
							}

							text {
								margin-left: 24rpx;
								color: #8e8a81;
								font-size: 15px;
							}
						}

						.list-right {
							display: flex;
							align-items: center;
							margin-top: 4rpx;

							image {
								width: 18rpx;
								height: 32rpx;
								margin-right: 20rpx;
							}

							text {
								color: #9f9a93;
								font-size: 13px;
								margin-right: 16rpx;
							}
						}
					}
				}
			}
		}
	}
</style>